<template>
<div class="app">
    <div class="d1" v-for="item in data.val" :key="item">
        <img class="i1" :src="item.img">
        
        <p>眼综合+全脸脂肪填充前后对比</p>
        <van-image
        class="v1"
        round
        width="2rem"
        height="2rem"
        :src="item.userimg"/>
        <div class="d2">{{item.username}}</div>  
        <div class="d3" @click="dj(item)"><img :src="src" alt=""><span class="s1">{{item.lovenum}}</span></div>
    </div>
    <van-loading size="24px" type="spinner" class="v2">正在加载</van-loading>
</div>

   
    

</template>
  
  <script setup lang="ts">
    
import { onMounted, reactive, ref} from 'vue';
import {beautifulPosts} from '@/api/beautiful.js'


let src =ref("/src/assets/u1246.png")
 let num=ref(330)
let ys=ref('#999999') 
let data=reactive({
    val:[]
})

    beautifulPosts()
    .then((res:any)=>{  
        
        data.val = JSON.parse(JSON.stringify(res.data.data));
        
        
        
    })


    





function dj(item:any){
    console.log(item);
    
    if(src.value=="/src/assets/u1246.png"){
        item.lovenum=item.lovenum+1
        src.value="/src/assets/u1248.png"
    }else if(src.value=="/src/assets/u1248.png"){
        item.lovenum=item.lovenum-1
        src.value="/src/assets/u1246.png"
    }
} 
  </script>
  
  <style scoped>
    .app{background: #fbf9f6;width: 390px;height:1630px;}
   .v2{float: left;margin-left: 40%;margin-top: 2%;}
    .d3{color: v-bind(ys);margin-left: 20%;float: left;margin-top: 5%;}
    
    .d2{float: left;margin-left: 2%;}
    .v1{float: left;}
    .d1{width: 160px;height: 300px;background: white;margin-left: 5%;margin-top: 5%;float: left;}
  .i1{width: 150px;height: 200px;margin-left: 2.5%;margin-top: 2.5%;}
  
  </style>